<template>
  <div class="center-bottom" v-if="pageflag">
    <div class="chart" style="height: 10%">
      <table class="table1" style="height: 100%">
        <tr class="headtr">
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            时间
          </th>
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            报警类型
          </th>
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            状态
          </th>
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            数值
          </th>
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            备注
          </th>
        </tr>
      </table>
    </div>
    <div class="chart" style="height: 88%">
      <table class="table1">
        <vue-seamless-scroll :data="tableData" class="seamless-warp">
          <ul class="item">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              style="
                display: flex;
                justify-content: space-around;
                align-items: center;
              "
            >
              <span
                style="
                  width: 18%;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                "
                >{{ item.time }}</span
              >
              <span
                style="
                  width: 18%;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                "
                >{{ item.alarmTypeName }}</span
              >
              <span style="width: 18%; text-align: center">{{
                item.stateName
              }}</span>
              <span style="width: 18%; text-align: center">{{
                item.value
              }}</span>
              <span style="width: 18%; text-align: center">{{
                item.remarks
              }}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </table>
      <span
        v-if="!tableData.length"
        style="
          font-size: 12px;
          text-align: center;
          width: 100%;
          display: block;
          margin-top: 20px;
          color: #ffffff;
        "
        >暂无数据</span
      >
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      pageflag: true,
      tableData: [
        {
          id: "1",
          time: "2023-03-23 13:14:01",
          alarmType: "0",
          alarmTypeName: "测温监测1",
          state: "1",
          stateName: "危险",
          value: "40°C",
          remarks: "无",
        },
        {
          id: "2",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "测温监测1",
          state: "1",
          stateName: "危险",
          value: "50°C",
          remarks: "无",
        },
        {
          id: "3",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "测温监测1",
          state: "1",
          stateName: "可能危险",
          value: "35°C",
          remarks: "无",
        },
        {
          id: "4",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测1",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
        {
          id: "5",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测1",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
        {
          id: "6",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测2",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
        {
          id: "7",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测1",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
        {
          id: "8",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测2",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
        {
          id: "9",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测1",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
        {
          id: "10",
          time: "2023-03-23 13:14",
          alarmType: "0",
          alarmTypeName: "可燃气体监测1",
          state: "1",
          stateName: "可能危险",
          value: "40%LEL",
          remarks: "无",
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    getData() {
      this.pageflag = true;
      const res = {
        success: true,
        data: [],
      };
      // eslint-disable-next-line no-empty
      if (res.success) {
      } else {
        this.pageflag = false;
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.center-bottom {
  height: 98%;
  flex: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0px 10px;
  .chart::-webkit-scrollbar {
    display: none;
  }
  .chart {
    width: 100%;
    overflow-y: scroll;
    .table1 {
      width: 100%;
      font-size: 14px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0px 0px;
      .seamless-warp {
        height: 100%;
        overflow: hidden;
        .item {
          padding: 0px 10px;
        }
      }
      .headtr {
        border-bottom: 1px solid rgba(0, 143, 253, 0.4);
        border-top: 1px solid rgba(0, 143, 253, 0.4);
        line-height: 14px;
        background-color: rgba(7, 73, 155, 0.4);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #71cdf9;
      }
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 36px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
      li:nth-child(2n) {
        height: 36px;
        background-color: rgba(113, 205, 249, 0.1);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      th {
        height: 17px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(23, 203, 203, 1);
        line-height: 17px;
      }
      td {
        text-align: center;
        color: white;
      }
      .rank1 {
        color: #66c852;
      }
      .rank1 {
        color: #66c852;
      }
      .rank2 {
        color: #fdb628;
      }
      .rank3 {
        color: #ed504c;
      }
    }
  }
}
</style>
